
  
  <template>
	<view>
		<block v-for="(item,index) in couponList" :key="index">
			<view class="coupon" :style="{'--color':color,
			'--discountColor':discountColor,'--expireColor':expireColor,'--btnColor':'#3e9de6'}">
				<!-- 优惠券上半部分 -->
				<view class="top-part" :class="item.state">
					<!-- 左半部分 -->
					<view class="left">
						<view class="limit">{{item.couponName}}</view>
						<view class="expire">{{item.expire}}</view>
					</view>
					<!-- 右半部分 -->
					<view class="right">
						<text class="yen">&yen;</text><text class="discount">{{item.discount}}</text>
					</view>
				</view>
				<!-- 优惠券下半部分 -->
				<view class="bottom-part" :class="{gray:item.state==='expired'}">
					<view class="limit">{{item.limit}}</view>
					<view class="btn bg-theme" v-if="item.state!='expired'" @click="getCoupon(item,item.state)">{{item.btn}}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name: "lgf-coupon",
		props: {
			color: {
				type: String,
				default: '#f3f3f4'
			},
			discountColor: {
				type: String,
				default: '#f52443'
			},
			expireColor: {
				type: String,
				default: '#f5dfde'
			},
			btnColor: {
				type: String,
				default: '#3e9de6'
			},
			coupons: {
				type: Array,
				default: () => [{
					couponName: '无门槛优惠券',
					expire: '2020-12-12 12:12:00至2020-12-12 12:12:00',
					discount: 15,
					limit: '仅限于xxx使用',
					btn: '领取',
					state: null
				}, {
					couponName: '无门槛优惠券',
					expire: '今日到期',
					discount: 15,
					limit: '仅限于xxx使用',
					btn: '领取',
					state: "expired"
				}]
			}

		},
		watch: {
			"coupons": function(n, v) {
				this.couponList = n;
			}
		},
		data() {
			return {
				couponList: [],
			}
		},
		mounted() {

		},
		methods: {
			//选择优惠卷
			Checked(id) {
				var coupons = this.couponList;
				let checkedCoupon = coupons.find(x => x.checked == true);
				if (checkedCoupon) {
					if (checkedCoupon.id != id) {
						uni.showToast({
							title: "你已选中一个优惠卷",
							icon: "none"
						})
						return;
					} else {

						coupons.forEach((item) => {
							item.btn = "选择";
							item.checked = false;
							item.state = "";

						})
					}
				} else {
					coupons.forEach((item) => {
						if (item.id == id) {
							item.checked = true;
							item.state = "";
							item.btn = "取消选中";
						} else {
							item.checked = false;

							item.state = "expired";
						}
					})
				}

				this.$forceUpdate()

			},
			GetChecked() {
				var coupons = this.couponList;
				let checkedCoupon = coupons.find(x => x.checked == true);
				return checkedCoupon;
			},
			getCoupon(val, state) {

				this.$emit('getCoupon', val)

			}
		}
	}
</script>
<style scoped lang="scss">
	.coupon {
		--expire: #ced2d6; //失效状态的颜色
		margin: 20rpx;

		.top-part {
			display: flex;
			justify-content: space-between;
			position: relative;
			background-color: #FFFFFF;
			border-radius: 10rpx;

			.left {
				.limit {
					font-size: 35rpx;
					padding: 30rpx 5rpx 5rpx 30rpx;
				}

				.expire {
					display: inline-block;
					text-align: center;
					font-size: 20rpx;
					margin: 0 5rpx 15rpx 30rpx;
					padding: 0 15rpx;
					border-radius: 15rpx;
					background-color: var(--expireColor);
				}
			}

			.right {
				color: var(--discountColor);
				display: flex;
				padding: 30rpx 30rpx 15rpx 5rpx;
				align-items: center;
				justify-content: center;
				font-weight: bold;

				.discount {
					font-size: 48rpx;
				}
			}

			&::after {
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				bottom: 0;
				border-bottom: 1px dashed #ededef;
			}
		}

		.bottom-part {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 25rpx;
			position: relative;
			border-radius: 10rpx;
			background-color: #FFFFFF;

			.limit {
				color: #807f8a;
				padding: 15rpx 30rpx;
			}

			.btn {
				color: #FFFFFF;
				height: 40rpx;
				margin-right: 15rpx;
				padding: 0 25rpx;
				border-radius: 35rpx;
				line-height: 40rpx;
			
			}

			&::before {
				display: block;
				content: '';
				width: 16rpx;
				height: 34rpx;
				background-color: var(--color);
				border-top-right-radius: 17rpx;
				border-bottom-right-radius: 17rpx;
				position: absolute;
				top: -20rpx;
			}

			&::after {
				display: block;
				content: '';
				width: 16rpx;
				height: 34rpx;
				background-color: var(--color);
				border-top-left-radius: 17rpx;
				border-bottom-left-radius: 17rpx;
				position: absolute;
				top: -20rpx;
				right: 0;
			}
		}

		.expired .right {
			color: var(--expire);
		}

		.expired .left .expire,
		.gray .btn {
			background-color: var(--expire);
		}

		.expired::before {
			font-size: 25rpx;
			text-align: center;
			line-height: 100rpx;
			display: block;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border-style: double;
			border-color: var(--expire);
			color: var(--expire);
			border-width: 3px;
			background-color: transparent;
			position: absolute;
			transform: rotate(-30deg);
			right: 40%;
			top: 30%;
			z-index: 1;
		}

		.expired:before {
			content: '已失效';
		}
	}
</style>

